<template>
    <div>
			<div v-if="chenload">
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div class="top"></div>
					<div class="con">
						<img :src="img+arr.avatar" alt="">
						<div class="name">
							<p>{{arr.name}}</p>
							<!-- <p>{{arr.profile}}</p> -->
							<p>{{arr.honor}}</p>
						</div>
						<div class="right">
							<button class="btoBlue" @click="guanzhu()" v-if="arr.collection==0||arr.collection=='0'">关注</button>
							<button class="btoGray" @click="guanzhu()" v-else>已关注</button>
							<p>{{arr.follow}}人关注</p>
						</div>
						<p class="pp"></p>
						<!-- <div class="z"> -->
							<!-- <div style="text-align: center">{{title}}</div> -->
							<!-- <div class="top-prove">为了证明楼下的那货不会对我造成影响</div> -->
							<div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
							  <!-- <div class="intro-content" ref="desc"> -->
							  <div class="intro-content" :title="introduce" ref="desc">
							    <span class="merchant-desc">{{introduce}}</span>
							    <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
							      <p>{{exchangeButton ? '[查看更多]' : '[收起]'}}</p>
							    </div>
							  </div>
							</div>
							
					</div>
					<!-- 相关视频 -->
					<div>
						<div class="v">
							<span class="span1"></span>
							<span class="span2">相关视频</span>
									<div id='dataList0'>
										<div class="ya" v-for="(item,index) in tab0.list" @click="btn(item)">
											<img :src="img+item.thumb" alt="" class="img2">
											<div>
												<p>{{item.name}}</p>
												<p class="p1">
													<img src="../../../src/assets/img/colorren.png" alt="" class="img1">
													<span>{{item.sales}}人已加入</span>

													<span class="blue" v-if="item.price ==0 ">免费</span>
													<span class="gray" v-else>￥{{item.price}}</span>
													<span>￥{{item.xprice}}</span>
												</p>
											</div>
										</div>
									</div>
						</div>
					</div>
					<!-- 登录弹窗 -->
					<div class="shoewr-chenhoupass">
						<div class="chen-contener chenpass">
							<p class="chen-title">提示</p>
							<p class="chen-text chen-textactive">您需要先登录?</p>
							<div class="chen-but">
								<p class="chen-but-no" @click="repeatclose()">取消</p>
								<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
							</div>
						</div>
					</div>
				</mescroll-vue>
      </div>
			<div class="loadmore" v-else>
				<img src="../../../src/assets/img/load.gif" alt="">
			</div>
		

    </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
	// 引入mescroll的vue组件
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Steach",
				components: {
				  MescrollVue
				},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						tabType: 0 ,// 菜单类型
						allLoaded:false,
						page:1,
						loadzheng:false,
						noloadzheng:false,
						chenload:false,
            arr:[],
            video:[],
            img:this.$store.state.img,
						introduce:'',
						// 是否展示所有文本内容
						showTotal: true,
						// 显示展开还是收起
						exchangeButton: true,
						// 是否显示展开收起按钮
						showExchangeButton: false,
						rem: ''
          }
      },
      methods:{
					showTotalIntro () {
						console.log(this.showTotal);
						this.showTotal = !this.showTotal;
						this.exchangeButton = !this.exchangeButton;
					},
					getRem () {
						const defaultRem = 16;
						let winWidth = window.innerWidth;
						let rem = winWidth / 375 * defaultRem;
						return rem;
					},
					nologin(){
						$('.shoewr-chenhoupass').fadeIn();
					},
					// 点击取消
					repeatclose(){
						$('.shoewr-chenhoupass').fadeOut();
					},
					// 点击去登录
					repeatclick(){
						$('.shoewr-chenhoupass').fadeOut();
						this.d();
					},
          guanzhu(){
            if (localStorage.getItem('token')){
              var that = this;
              // console.log(b)
               that.axios.get(this.$store.state.url +'find/teacherColl',{
              	 params:{
              		 id:this.$route.query.id
              	 }
               }).then(res=>{
              	 // console.log(res.data)
              	 if(res.data.errcode==0||res.data.errcode=='0'){
                  var teacher_collection = this.arr.collection;
              		if(teacher_collection==0||teacher_collection=='0'){
              			that.$toast({
              			  message:'关注成功',
              			  position:'bottom'
              			});
										this.arr.follow = this.arr.follow +1;
              			this.arr.collection = 1
              		}else{
										this.arr.follow = this.arr.follow -1;
              			that.$toast({
              			  message:'已取消关注',
              			  position:'bottom'
              			});
              			this.arr.collection = 0
              		}
              	 }else{
              		 that.$toast({
              		   message:res.data.msg,
              		   position:'bottom'
              		 });
              	 }
               })
            } else {
              this.nologin();
            }
          },
        huoqu(){
          this.axios.get(this.$store.state.url +'find/teacherDesc',{
            params:{
             id:this.$route.query.id
            }
          }).then(res=>{
						this.chenload=true;
            if (res.data.errcode == 0||res.data.errcode == '0'){
              this.arr = res.data.data;
							// this.introduce = 'Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。';
							this.introduce = this.arr.profile;
							// console.log(this.arr.profile)
            }
          })
        },
        btn(item){
					var type = item.type;
					this.$router.push({
						path:'/course',
						query:{
						 cid:item.id
						}
					})
        
        },
				mescrollInit0 (mescroll) {
				  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
				  this.tab0.mescroll = mescroll;
				},
				getMescrollUp (tabType) {
				  let emptyWarpId = 'dataList' + tabType;
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    empty: {
				      warpId: emptyWarpId, // 父布局的id;
				      icon: this.imgSrc, // 图标,默认null
				      tip: '暂时没有找到您所需要的内容', // 提示
				      
				    },
				    
				  }
				},
				upCallback (page, mescroll) {
				  if (mescroll.tabType === 0) {
				    // 全部
				    this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						this.axios.get(this.$store.state.url +'find/teacherCourse',{
							 params:{
								 id:this.$route.query.id,
								 page: page.num,
								 limit:page.size,
								 new:1
							 }
						 }).then(res=>{
											// console.log(res.data.data.class)
							this.chenload = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
							 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
							 // this.tab0.list=res.data.data.order
							}
						
						})
				  }
				}
				
      },
      mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
				this.loginsuccess();
          //获取教师信息
          this.huoqu();
					// 获取是否登录成功
          this.loginsuccess();
					
					// this.teacherCourse(0);
         
      },
			watch: {
			  'introduce': function () {
			    this.$nextTick(function () {
			      console.log('nextTick');
			      // 判断介绍是否超过四行
			      let rem = parseFloat(this.getRem());
			      // console.log('watch 中的rem', rem);
			      if (!this.$refs.desc) {
			        // console.log('desc null');
			        return;
			      }
			      let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
			      // console.log('descHeight:' + descHeight);
			      // console.log('如果 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮');
			      if (descHeight > 5.25 * rem) {
			        // console.log('超过了四行');
			        // 显示展开收起按钮
			        this.showExchangeButton = true;
			        this.exchangeButton = true;
			        // 不是显示所有
			        this.showTotal = false;
			      } else {
			        // 不显示展开收起按钮
			        this.showExchangeButton = false;
			        // 没有超过四行就显示所有
			        this.showTotal = true;
			        // console.log('showExchangeButton', this.showExchangeButton);
			        // console.log('showTotal', this.showTotal);
			      }
			    }.bind(this));
			  }
			}
    }
</script>

<style  lang="less" scoped rel="stylesheet/less">
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
	.top{
		height: 1.88rem;
		background: #0287FF;
		overflow: hidden;
	}
  .con{
    width: 92%;
    margin: auto;
    background:rgba(255,255,255,1);
    box-shadow:0 0 0.1rem 0 rgba(71,68,80,0.1);
    border-radius:0.08rem;
    margin-top: -1.5rem;
    box-sizing: border-box;
    padding: 0.3rem;
  }
  .con img{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    float: left;
  }
  .name{
    margin-left: 0.3rem;
    float: left;
  }
  .name p:nth-child(1){
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    margin-top: 0.1rem;
  }
	.name p:nth-child(2){
		width: 3rem;
		font-size:0.24rem;
		color:rgba(194,201,211,1);
		margin-top: 0.1rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
  .right{
    float: right;
    margin-top: 0.1rem;
  }
  .btoBlue{
    width:1rem;
    height:0.44rem;
    background:rgba(2,135,255,1);
    border-radius:0.22rem;
    color: #fff;
    font-size:0.24rem;
    border: none;
    float: right;
  }
	.btoGray{
		width:1rem;
		height:0.44rem;
		background:rgba(240,240,240,1);
		border-radius:0.22rem;
		color: #999999;
		font-size:0.24rem;
		border: none;
		float: right;
	}
  .right p{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    margin-top: 0.54rem;
  }
  .pp{
    height:0.01rem;
    background:rgba(237,237,237,1);
    margin-top: 1.5rem;
  }
  .z{
    font-size:0.22rem;
    color:#C2C9D3;
    text-indent: 0.2rem;
    margin-top: 0.3rem;
		white-space: pre-wrap;
		padding-left: .1rem;
  }
	
	.v{
		width: 100%;
		margin-top: 0.2rem;
		background: #fff;
		box-sizing:border-box;
		padding: 0.3rem 0.3rem 0.3rem 0.3rem;
	}
	.span1{
		display: inline-block;
		width:0.04rem;
		height:0.28rem;
		background:rgba(2,135,255,1);
		/*vertical-align: middle;*/
	}
	.span2{
		margin-left: 0.1rem;
		font-size:0.28rem;
		font-weight:bold;
		color:rgba(51,51,51,1);
		line-height:0.32rem;
		vertical-align: top;
	}
	.ht{
		margin-top: 0.3rem;
		height: 5.04rem;
	}
	.ya{
		height: 1.18rem;
		margin-top: 0.3rem;
		position: relative;
	}
	.img2{
		width: 2.1rem;
		height: 100%;
		float: left;
		border-radius:0.08rem;
	}
	.ya div{
		height: 100%;
		margin-left: 2.3rem;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}
	.ya div p:nth-child(1){
		font-size:0.28rem;
		color:rgba(51,51,51,1);
		line-height:0.32rem;
	}
	.img1{
		width: 0.3rem;
		height: 0.3rem;
	}
	.p1{
		width: 100%;
	}
	.p1 span:nth-child(2){
		/*font-size:0.24rem;*/
		color:rgba(194,201,211,1);
		line-height:0.32rem;
	}
	.p1 span:nth-child(4){
		font-size:0.24rem;
		color:rgba(194,201,211,1);
		text-decoration:line-through;
		line-height:0.36rem;
		float: right;
		margin-right: 0.2rem;

	}
	.gray{
		font-size:0.3rem;
		font-weight:bold;
		color:rgba(255,2,20,1);
		line-height:0.32rem;
		float: right;
	}
  .blue{
    font-size:0.3rem;
    font-weight:bold;
    color:#0287FF;
    line-height:0.32rem;
    float: right;
  }
	
	.total-introduce {
	  height: auto;
	  overflow: hidden;
	  font-size: .22rem;
	  color: #C2C9D3;
	  margin: .2rem 0;
		// position: relative;
		white-space: pre-wrap;
	  .intro-content {
	    .merchant-desc {
	      width: 100%;
	      line-height: .4rem;
	    }
	  }
	  .unfold {
	    display: block;
	    z-index: 11;
	    float: right;
	    width: 1rem;
	    height: .4rem;
	    p {
	      margin: 0;
	      line-height: .4rem;
	      color: #FF0214;
	    }
	  }
	}
	.detailed-introduce {
		height: auto;
	  font-size: .22rem;
	  color: #434343;
	  position: relative;
	  overflow: hidden;
	  margin: .2rem 0;
		white-space: pre-wrap;
	  .intro-content {
	    /* // 最大高度设为4倍的行间距 */
	    max-height: 1.6rem;
	    line-height: .4rem;
	    word-wrap: break-word;
	    /*强制打散字符*/
	    word-break: break-all;
	    background: #ffffff;
	    /*同背景色*/
	    color: #ffffff;
	    overflow: hidden;
	    .merchant-desc {
	      width: 100%;
	      line-height: .4rem;
	    }
	    &:after,
	    /* // 这是展开前实际显示的内容 */
	    &:before {
	      content: attr(title);
	      position: absolute;
	      left: 0;
	      top: 0;
	      width: 100%;
	      font-size: .22rem;
	      color: #C2C9D3;
	      // overflow: hidden;
	    }
	    /* // 把最后最后一行自身的上面三行遮住 */
	    &:before {
	      display: block;
	      overflow: hidden;
	      z-index: 1;
	      max-height: 1.2rem;
	      background: #ffffff;
				font-size: .22rem;
				color: #C2C9D3;
	    }
	    &:after {
				max-width: 6rem;
	      display: -webkit-box;
	      -webkit-box-orient: vertical;
	      overflow: hidden;
	      height:1.6rem;
	      /*截取行数*/
	      -webkit-line-clamp: 4;
	      text-overflow: ellipsis;
	      -webkit-box-sizing: border-box;
	      box-sizing: border-box;
	      /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
	      text-indent: -12em;
	      /*尾部留空字符数*/
	      padding-right: 4em;
	    }
	    .unfold {
	      z-index: 11;
	      width: 1.2rem;
	      height: .4rem;
	      outline: 0;
	      position: absolute;
	      right: 0;
	      bottom: 0;
	      p {
	        margin: 0;
	        line-height: .4rem;
	        color: #0287FF;
	      }
	    }
	  }
	}
</style>
